<template>
  <div>
    <h1 style="color: red">直播平台测试</h1>
    <!-- 推流的视频展示 -->
    <div>
      <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
      <div style="margin: 20px;">
          <el-button type="primary" @click="openCamera">打开摄像头</el-button>
          <el-button type="primary" @click="closeCamera">关闭摄像头</el-button>
          <el-button type="primary" @click="startScreenCapture">共享屏幕</el-button>
          <el-button type="primary" @click="stopScreenCapture">关闭共享</el-button>
      </div>
      <div style="margin: 20px;">
          <el-button type="primary" @click="startMicrophone">打开麦克风</el-button>
          <el-button type="primary" @click="stopMicrophone">关闭麦克风</el-button>
          <el-button type="primary" @click="startPush">开始直播</el-button>
          <el-button type="primary" @click="stopPush">停止直播</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//推流的视频展示
//https://cloud.tencent.com/document/product/454/56493

  export default {
    data(){
      return{
        livePusher:{},
        liveInfo:{
          pushUrl:""
        }
      }
    },
    methods:{
    //初始化腾讯推流组件
      readyPusher(){
          // eslint-disable-next-line no-undef
          this.livePusher = new TXLivePusher();
          // 指定本地视频播放器容器：
          this.livePusher.setRenderView('id_local_video');
          // 设置视频质量
          this.livePusher.setVideoQuality('720p');
          // 设置音频质量
          this.livePusher.setAudioQuality('standard');
          // 自定义设置帧率
          this.livePusher.setProperty('setVideoFPS', 25);
          console.log('readyPusher OK');
          //获取视频效果管理实例
          this.videoEffectManager = this.livePusher.getVideoEffectManager();
          //开启混流
          this.videoEffectManager.enableMixing(true);
          //设置混流参数
          this.videoEffectManager.setMixingConfig({
            videoWidth: 1280,
            videoHeight: 720,
            videoFramerate: 15
          });
      },
      openCamera() {
          // 打开摄像头
          this.livePusher.startCamera();
      },
      closeCamera() {
          // 关闭摄像头
          this.livePusher.stopCamera();
      },
      startScreenCapture() {
          // 打开共享桌面
          this.livePusher.startScreenCapture();
      },
      stopScreenCapture() {
          // 关闭共享桌面
          this.livePusher.stopScreenCapture();
      },
      startMicrophone() {
          // 打开麦克风
          this.livePusher.startMicrophone();
      },
      stopMicrophone() {
          // 关闭麦克风
          this.livePusher.stopMicrophone();
      },
      startPush() {
          console.log("startPush",this.liveInfo.pushUrl)
          this.livePusher.startPush(this.liveInfo.pushUrl)

      },
      stopPush() {
        console.log("stopPush",this.liveInfo.pushUrl)
          this.livePusher.stopPush(this.liveInfo.pushUrl);
      },
    },
    mounted() {
      //let obj = this.$route.query.obj;
      //this.live = JSON.parse(obj);
      this.liveInfo.pushUrl = "webrtc://160242.livepush.myqcloud.com/2109A/lihgang?txSecret=ca471e7594d3473498898c70d3fcbd3e&txTime=6645D29A";
      //--1 初始化腾讯云播放器
      /*动态创建引入js*/
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js";
      document.getElementsByTagName("head")[0].appendChild(script);

      this.readyPusher();
      
    }
  }
</script>

<style>
.filmvideo{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
